<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Login</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <script src="js/skel.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/style.css" />
        </noscript>

        <style>

            .myErrors {
                color:red;
            }

        </style> 

    </h:head> 
    <h:body class="loading">

        <div id="wrapper">
            <div id="bg"></div>
            <div id="overlay"></div>
            <div id="main">
                <!-- Header -->
                <header id="header">
                    <h:form id="frmLogin">
                        <h1>Login</h1>
                        <div class="myErrors">
                            <h:messages id="fooMessage"/>
                            <h:outputText value="#{login.error}" style="color:red"/>
                        </div>
                        <div class="divText">
                            <h:inputText id="txtUsername" validatorMessage="Please enter Email valid!" requiredMessage="Please enter Username!" required="true"  p:placeholder="Email" style="width: 100%;" value="#{login.username}">
                            </h:inputText>
                            <h:outputText id="checkErr"></h:outputText>
                            <h:inputSecret id="txtPassword" required="true" requiredMessage="Please enter Password!" p:placeholder="Password" style="width:100%;" value="#{login.password}">
                            </h:inputSecret><br/>
                            <h:selectBooleanCheckbox id="ckRemember" value="#{login.rememberUser}"/> Remember Me !
                        </div>
                        <nav>
                            <h:commandButton id="btnLogin" value="Sign In" style="width: 205px;" action="#{login.action}">
                                <!--<f:ajax event="click" render="fooMessage" execute="@all"/>-->
                            </h:commandButton>
                           
                        </nav>
                        <nav>
                            <ul>  
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="https://www.facebook.com" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
                                <li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
                            </ul>
                        </nav>
                        <!--</form>-->

                    </h:form>
                </header>

                <!-- Footer -->
                <footer id="footer">
                    <span class="copyright">&copy; Copyright Blue Pumpkin 2014</span>
                </footer>
            </div>
        </div>
    </h:body>
</html>

